<template>
  <div
    :class="[
      'Canvas',
      { phoneCav: agentType === 'phone', tabletCav: agentType === 'tablet' },
    ]"
  >
    <!-- 弹性盒子渲染 -->
    <component
      v-for="(item, index) in centerView"
      v-model:com-data="centerView[index]"
      :is="item.comName"
      :key="item.id"
      :isEdit="false"
      :style="item.style"
    />
  </div>
</template>

<script setup>
import useGetState from "@/utils/useGetState";
import { useStore } from "vuex";

const store = useStore();
const { centerView, agentType } = useGetState(store, [
  "centerView",
  "agentType",
]);
</script>
<style lang="scss" scoped>
.Canvas {
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: column;
  background-color: #fff;
}

.phoneCav {
  width: 375px;
  min-height: 667px;
  overflow-y: auto;
  margin: 10px auto;
}

.tabletCav {
  width: 450px;
  min-height: 667px;
  overflow-y: auto;
  margin: 10px auto;
}
</style>
